<template>
  <div class="send_goods">
    <Head title="填写物流单号"/>
    <div class="container">
      <div class="send_banner">
        <img src="/static/image/send_goods_banner.png" alt>
      </div>
      <div class="form">
        <div class="form_list" @click="showList=true">
          <div class="form_list_left">店铺logo</div>
          <div class="form_list_center">
            <span v-text="kd==''?'请选择':kd"></span>
          </div>
          <div class="form_list_right">
            <i class="iconfont iconrightArrow"></i>
          </div>
        </div>
        <div class="form_list">
          <div class="form_list_left">快递单号</div>
          <div class="form_list_center">
            <input
              type="number"
              placeholder="请填写快递单号"
              v-model="express_no"
              oninput="if(value.length>50)value=value.slice(0,50)"
            >
          </div>
          <div class="form_list_right" v-if="express_no!=''" @click="express_no=''">
            <i class="iconfont iconLogonClosed"></i>
          </div>
        </div>
      </div>
      <div class="send_btn" @click="send_goods()">
        <span>确认提交</span>
      </div>
      <!-- 快递列表 -->
      <van-popup v-model="showList" position="bottom" :overlay="true">
        <van-picker
          :show-toolbar="true"
          title="请选择快递公司"
          :columns="express_name"
          @cancel="cancel"
          @confirm="confirm"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import Head from "@/components/_head";
export default {
  data() {
    return {
      showList: false,
      columns: ["圆通快递", "中通快递", "申通快递", "百世汇通", "顺丰快递"],
      kd: "",
      express_com_list: [], //公司代码
      express_name: [], //公司名称
      express_no: "", //快递单号
      express_com: "" //选中的公司代码
    };
  },
  mounted() {
    this.get_express_company_list();
  },
  methods: {
    // 获取快递公司列表
    get_express_company_list() {
      this.appJS.ajax("user.get_express_company_list", "post", {}, res => {
        if (res.recode == 1) {
          let express_com = [],
            express_name = [];
          for (let i in res.data.express_company_list) {
            express_com.push(res.data.express_company_list[i].express_com);
            express_name.push(
              res.data.express_company_list[i].express_company_name
            );
          }
          this.express_name = express_name;
          this.express_com_list = express_com;
        }
      });
    },
    send_goods() {
      if(this.express_no==''||this.express_com==''){
        this.$toast('请填写物流信息')
        return
      }
      this.appJS.ajax("user.order_express_post", "post", {
        express_com:this.express_com,
        express_no:this.express_no,
        order_id:this.$route.query.order_id
      }, res => {
        if (res.recode == 1) {
          this.$toast("发货成功")
          setTimeout(() => {
            this.$router.go(-1);
          }, 1000);
        }
      });
      
    },
    // 取消
    cancel() {
      this.showList = false;
    },
    // 确认
    confirm(value, index) {
      this.kd = value;
      this.express_com = this.express_com_list[index];
      this.showList = false;
    }
  },
  components: {
    Head
  }
};
</script>

<style lang='less'>
.send_banner {
  height: 50vw;
  width: 100%;
}
.send_btn {
  height: 20vw;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 5vw;
  span {
    color: #fff;
    border-radius: 100px;
    background: @actColor;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    height: 13vw;
    width: 90%;
  }
}
.form {
  .form_list {
    height: 3.5rem;
    width: 100%;
    padding: 0 0.5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #888;
    background: #fff;
    border-bottom: 1px solid #efefef;
    flex-wrap: wrap;
    &:last-child {
      border: 0;
    }
    .form_list_left {
      height: 100%;
      width: 20%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 0.8rem;
    }
    .form_list_center {
      width: 60%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 100%;
      font-size: 0.7rem;
      span {
        color: #888;
      }
      input {
        height: 90%;
        width: 100%;
        font-size: 0.7rem;
      }
    }
    .form_list_right {
      height: 100%;
      width: 20%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .iconfont {
        font-size: 1.4rem;
      }
      .iconLogonClosed {
        font-size: 1.1rem;
      }
      span {
        font-size: 0.7rem;
        color: @actColor;
        padding: 0.1rem 0.5rem;
        border: 1px solid @actColor;
        border-radius: 4px;
      }
    }
  }
  .city_show {
    min-height: 3rem;
    width: 100%;
    padding: 0.5rem;
    font-size: 0.8rem;
    color: #888;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #efefef;
  }
  .text_box {
    height: 20vw;
    padding: 0.5rem;
    background: #fff;
    font-size: 0.8rem;
    color: #888;
    textarea {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
